<template>
  <div class="AdjustmentDetail">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/AdjustmentList' }">预警调整及解除</el-breadcrumb-item>
        <el-breadcrumb-item>信息预览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="AdjustmentDetail-center">
      <TimeLine :activities="activities" />
      <div class="AdjustmentDetail-add">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="flex-container">
          <el-tab-pane label="预警通知单" name="1">
            <NoticeDetails />
          </el-tab-pane>
          <el-tab-pane label="调度-预警措施及反馈" name="2">
            <dispatch />
          </el-tab-pane>
          <el-tab-pane label="设备-预警措施及反馈" name="3">
            <equipment />
          </el-tab-pane>
          <el-tab-pane label="配电-预警措施及反馈" name="4">
            <distribution />
          </el-tab-pane>
          <el-tab-pane label="营销-预警措施及反馈" name="5">
            <Marketing />
          </el-tab-pane>
          <el-tab-pane label="物资-预警措施及反馈" name="6">
            <material />
          </el-tab-pane>
          <el-tab-pane label="国网随州供电公司-预警措施及反馈" name="7">
            <sz />
          </el-tab-pane>
        </el-tabs>
        <div class="AdjustmentDetail-btn">
          <el-row>
            <el-button size="mini" @click="AddFh">返回</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NoticeDetails from "./components/NoticeDetails.vue";
import dispatch from "./components/dispatch.vue";
import equipment from "./components/equipment.vue";
import distribution from "./components/distribution.vue";
import sz from "./components/sz.vue";
import Marketing from "./components/Marketing.vue";
import material from "./components/material.vue";
import TimeLine from "@/components/component/timeLine.vue";
export default {
  name: "AdjustmentDetail",
  components: { NoticeDetails, dispatch, equipment, distribution, sz, Marketing, material, TimeLine },
  data() {
    return {
      activeName: "1",
      reverse: false,
      value1: "",
      show: this.$route.query.show,
      formInline: {
        date1: "",
        region: "",
        value: ""
      },
      activities: [
        {
          content: "预警信息新增",
          timestamp: "2022-09-1 18:00:00"
        },
        {
          content: "预警研判",
          timestamp: "2022-09-2 18:00:00"
        },
        {
          content: "预警通知单新增",
          timestamp: "2022-09-2 20:00:00"
        },
        {
          content: "预警通知单审批",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警任务发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单调整申请",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单信息预览",
          timestamp: "2022-09-5 18:00:00",
          color: "rgb(37, 109, 252)"
        }
      ]
    };
  },
  methods: {
    AddFh() {
      this.$router.go(-1);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped lang="less">
.AdjustmentDetail {
  width: 100%;
  height: 100%;
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

:deep(.el-tabs__content) {
  width: 100%;
  height: 88%;
  overflow-y: auto;
  position: relative;
}

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {

  // border-bottom: none;
  .el-tabs__item {
    color: rgb(153, 153, 153);
    padding: 0;
    height: auto;
    height: 28px;
    line-height: 22px;
    border: 1px solid rgb(153, 153, 153);
    padding: 3px 10px;
    text-align: center;
    border-radius: 4px;
    margin-left: 15px;
  }

  .el-tabs__nav {
    display: flex;
    border: none;
  }

  .el-tabs__item.is-active {
    color: #fff;
    border-bottom: #3561fd;
    background-color: #3561fd;
    border: 1px solid #3561fd;
  }
}

:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}

:deep(.el-tabs) {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
}

:deep(.el-timeline) {
  width: 85%;
  margin-left: 35px;
  margin-top: 30px;
}

:deep(.el-tabs__header) {
  width: 90%;
  height: 10%;
  margin-top: 10px;
  border-bottom: none;
}

.AdjustmentDetail-add {
  width: 83%;
  background-color: #fff;
  border-radius: 5px;
  position: relative;

  .AdjustmentDetail-btn {
    position: absolute;
    top: 8px;
    right: 2%;
  }
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.AdjustmentDetail-center {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}</style>
